<template>
  <div>
    <!-- <el-container>
        <el-aside width="200px" class="nopadding">
            <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            >
                <el-menu-item index="1">
                    <span slot="title">图形报表</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <el-row>
                <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px' }">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                    <div style="padding: 14px;">
                        <span>新建图表</span>
                        <div class="bottom clearfix">
                            <time class="time">{{ currentDate }}</time>
                            <el-button type="text" class="button">操作按钮</el-button>
                        </div>
                    </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
  </el-container> -->
    <el-row>
      <el-col :span="4">
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-menu-item
            v-for="(menutype, index) in menutypeList"
            :key="index"
            @click="getFormls(menutype)"
          >
            <span slot="title">{{ menutype }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="20">
        <el-row class="row">
          <el-col :span="4" :offset="1">
            <el-card
              :body-style="{ padding: '0px' }"
              shadow="hover"
              class="card"
            >
              <img src="@/assets/images/新增图片.jpg" class="image" />
              <div style="padding: 14px">
                <span>新建图表</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="handleCharts"
                    >新增报表</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col
            :span="4"
            v-for="(form, index) in formList"
            :key="index"
            :offset="1"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              shadow="hover"
              class="card"
            >
              <img src="@/assets/images/柱状图图片.jpg" class="image" />
              <div style="padding: 14px">
                <span>{{ form.formName }}</span>
                <div class="bottom clearfix">
                  <!-- <time class="time">{{ currentDate }}</time> -->
                  <el-button type="text" class="button" @click="goToIndex(form.formId)"
                    >修改报表</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 新增报表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <p class="nonextline">报表名称：</p>
      <div class="nonextline">
        <el-input
          v-model="insertName"
          placeholder="请输入报表名称"
          size="medium"
        ></el-input>
      </div>
      <br>
      <p class="nonextline">报表类型：</p>
      <el-select v-model="insertType" placeholder="请选择">
        <el-option
          v-for="item in menutypeList"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <br>
      <el-button type="primary" @click="insForm">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getFormlist,insertForm } from "@/api/formdesigner/formdesigner";

export default {
  name: "formchoose",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //新增报表名称
      insertName: "",
      //新增报表种类
      insertType: "",

      menutypeList: ["原始数据报表", "统计数据报表"],
      formList: [],
      currentDate: new Date(),
    };
  },
  mounted() {
    // console.log(this.menutypeList[0]);
    this.getFormls(this.menutypeList[0]);
    // console.log(formList)
  },
  methods: {
    handleCharts() {
      this.open = true;
      this.title = "新增报表";
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    //新增报表
    insForm() {
      let data = {
        formName: this.insertName,
        formType: this.insertType,
        formSize:0,

      };
      insertForm(data)
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
        this.goToIndex();
    },

    getFormls(menutype) {
      console.log(menutype);
      let data = {
        formType: menutype,
      };
      getFormlist(data)
        .then((res) => {
          console.log(res);
          this.formList = res.data;
          console.log(this.formList);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goToIndex(data) {
      this.$router.push("/visualization/formdesign?index="+data);
      // this.$router.push("/formdesigner");
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.nopadding {
  padding: 0;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card {
  margin-bottom: 30px;
}

.nonextline {
  display: inline-block;
}
</style>
